<template>
  <div class="classify">
    <van-search v-model="value" placeholder="输入搜索内容" input-align="center"
    right-icon="search" left-icon="" shape="round" @search="search"/>
    <!-- 侧边导航。最左侧的导航 -->
    <div class="main">
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item
          v-for="(item, i) of arrData"
          :key="i"
          :title="item.title"
        />
        <!-- <div v-for="(item,i) of arrData" :key="i" :title="item">{{item}}</div> -->
      </van-sidebar>

      <!-- 右侧商品列表 -->
      <div class="goods">
        <h6 class="hot">当季最热</h6>
        <van-grid class="hot-item" :column-num="3">
          <van-grid-item v-for="(item, i) of arrChild" :key="i" @click="toSearch(item.title)">
            <van-image :src="item.img"></van-image>
            <p>{{ item.title }}</p>
          </van-grid-item>
        </van-grid>
        <h6 class="other">其他</h6>
        <van-grid :column-num="3">
          <van-grid-item v-for="(item, i) of arrOther" :key="i" @click="toSearch(item)">
            <p class="other-item">{{ item }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
import router from "../../router/index.js";
// 尝试使用 composition-api 来使用，于 reactive() 中添加统一的响应式数据
// import {reactive}from "@vue/composition-api";
export default {
  setup() {
    //顶部搜索框的值
    const value = ref("");
    // 整个页面所有的数据
    const arrData = ref([]);
    // 单独的当季最热的数据
    const arrChild = ref([]);
    // 单独的其他的数据
    const arrOther = ref([]);
    // 侧边导航的索引
    const active = ref(0);
    // 修改 arrChild arrOther 的数据的函数
    const onChange = (index) => {
      arrChild.value = arrData._rawValue[index].children;
      arrOther.value = arrData._rawValue[index].other;
    };
    // 搜索框的确定搜索事件
    const search = () => {
      if(value.value !== "") {
        console.log(value.value);
        router.push("/search/" + value.value);
        console.log(1);
      } else {
        router.push("/search/洋葱");
        console.log(2);
      }
    }
    const toSearch = (val) => {
      router.push("/search/" + val);
    }
    // 获取分类页的数据
    const getClassify = () => {
      fetch("http://www.pudge.wang:5000/api/home/classify", {
        method: "POST", // 使用 POST
      })
        .then((response) => response.json())
        .then((res) => {
          // 将结果传递给 arrData
          arrData.value = res.result;
          onChange(0);
        });
    };
    // 页面加载完成后调用
    onMounted(() => {
      getClassify();
    });

    return { active, onChange, toSearch, search, value, arrData, arrChild, arrOther };
  },
};
</script>
<style scoped>
/* 头部搜索框 */
.van-sidebar-item__text {
  font-size: 12px;
}
.classify .van-cell {
  flex-direction: row-reverse;
  box-shadow: 0px 0px 2px 0px #ccc;
  border-radius: 15px;
}
.classify .van-sidebar {
  text-align: center;
}
/* 身体部分 */
.classify .main {
  display: flex;
}
/* 左侧导航 */
.classify .main .van-sidebar-item--select {
  position: relative;
  color: #4cc79b;
  background-color: white;
}
.classify .van-sidebar-item {
  padding-left: 0px;
  padding-right: 0px;
  background-color: rgb(242, 242, 242);
}
.classify .van-sidebar-item--select::before {
  background-color: #4cc79b;
  bottom: 0px;
  width: 60%;
  left: 20%;
  top: 65%;
  height: 3px;
}
/* 右侧商品 */
.classify .goods {
  width: 100%;
  padding-right: 20px;
}
.classify h6 {
  margin: 0px;
  padding-left: 20px;
}
.classify .hot-item {
  font-size: 14px;
}
.classify .other-item {
  width: 59px;
  height: 31px;
  border: rgb(177, 231, 212) 1px solid;
  border-radius: 2px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.classify .van-hairline--top {
  width: 100%;
}
.classify .van-grid-item {
  padding-left: 20px;
  padding-top: 20px;
}
.classify .van-grid-item__content {
  background-color: transparent;
  padding: 0px;
  border: 1px solid #ccc;
}
.classify .van-grid-item .van-badge__wrapper {
  width: 100%;
  display: block;
  height: 70px;
  background: rgb(242, 242, 242);
}
</style>
